<template>
	<view class="message">
		<view class="message_head"  :style="{'paddingTop':StatusBar + 'px'}">
			<view class="head_title">消息</view>
			<view class="head_tab">
				<view class="tab_item" :class="item.id == tab_id ? 'current': ''" v-for="item in tab_list" :key="item.id" @click="tap_tab(item.id)">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{item.text}}</text>
					<view class="item_icon"></view>
				</view>
			</view>
		</view>
		<view class="message_content">
			<mescroll-uni :down="downOption" :up="upOption"  :fixed="false" ref="mescrollRef" @init="mescrollInit"
							@down="downCallback" @up="upCallback">
				<view class="content_serve" v-if="tab_id == 3">
						<view class="serve_item" v-for="(item, index) in serve_data" :key="item.id">
							<view class="item_img">
								<image src="../../static/logo.png" mode="widthFix"></image>
							</view>
							<view class="item_box">
								<view class="box_title">{{item.name}}</view>
								<view class="box_tips">
									<text class="tips_text">在线</text>
									<text class="tips_icon"></text>
								</view>
							</view>
							<view class="item_btn">
								<view class="btn_box" @click="tapImage(item.img)">联系客服</view>
							</view>
						</view>
				</view>
				<view class="content_comment"  v-if="tab_id == 2">
					<view class="comment_head">
						<view class="head_item" :class="comment_id == 1 ? 'current': ''" @click="tap_comment(1)">
							<text>评论我的</text>
							<image src="../../static/message/plwd.png" mode="widthFix"></image>
						</view>
						<view class="head_item"  :class="comment_id ==2 ? 'current': ''"  @click="tap_comment(2)">
							<text>我评论的</text>
							<image src="../../static/message/wpld.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="comment_list">
						<view class="list_item1" v-for="item in 10" v-if="comment_id == 1">
							<view class="item1_head">
								<view class="head_img">
									<image src="../../static/logo.png" mode="widthFix"></image>
								</view>
								<view class="head_text">
									<view class="text_title">淘气铁子</view>
									<view class="text_time">2023-11-23</view>
								</view>
							</view>
							<view class="item1_icon">
								<view class="icon_item" v-for="item in 3">#皮肤超值</view>
							</view>
							<view class="item1_tips">热门限定每款皮肤值50元。其他各类皮肤按原售价的三分之
							一折算!还有些赛季限定和内测限定，比如亚瑟的狮心王，嬴
							政的优雅恋人等等这些需要看卖家的喜好来定价格
							</view>
							<view class="item1_bottom">
								<view class="bottom_reply">
									<text>回复</text>
									<text class="iconfont icon-huifu"></text>
								</view>
								<view class="bottom_leke">
									<text>118</text>
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
						</view>
						
						<view class="list_item2" v-for="item in 10">
							<view class="item2_left">
								<view class="left_text">
									热门限定每款皮肤值50元。其他各类皮肤按原售
									价的三分之一折算！还有些赛季限定和内测限定
								</view>
								<view class="left_game">
									<view class="game_image">
										<image src="../../static/logo.png" mode="widthFix"></image>
									</view>
									<text class="game_name">永劫无间</text>
								</view>
							</view>
							<view class="item2_right">
								<view class="right_image">
									<image src="../../static/logo.png" mode="widthFix"></image>
								</view>
								<view class="right_time">11月05日</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content_system" v-if="tab_id == 1">
					
						<view class="system_item" v-for="item in system_data" :key="item.id">
							<view class="item_image">
								<image src="../../static/message/system.png" mode="widthFix"></image>
							</view>
							
							<view class="item_content">
								<view class="content_title">{{item.title}}</view>
								<view class="content_tips">{{item.tips}}</view>
							</view>
							<view class="item_time">{{item.time}}</view>
						</view>
				</view>
			</mescroll-uni>

		</view>
		<k-tabbar />
	</view>
</template>
 
<script>
import {system_message, serve_message } from '@/api/index'
	export default {
		data() {
			return {
				tab_list: [
					{id:1, text: "系统通知", img:"../../static/message/xttz.png"},
					// {id:2, text: "我的评论", img:"../../static/message/wdpl.png"},
					{id:3, text: "联系客服", img:"../../static/message/lxkf.png"},
				],
				system_data: [],
				serve_data: [],
				tab_id:1,
				comment_id: 1,
				StatusBar: this.StatusBar,
				mescroll: null,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多了 --', // 没有更多数据的提示文本
					offset: 1,
					noMoreSize: 2,
					empty: {
						icon: '',
						tip: '没有数据~试试修改筛选条件或查看其他游戏'
					},
					page: {
						num: 1,
						size: 10
					}
				},
				loading:false,
				page: 1,
				pageSize: 10,
				total: null, //服务器数量
				localTotal: 0, //本地已经加载数量
			}
		},
		onLoad() {
			if (this.tab_id == 1) {
				this.system_message()
			}else if(this.tab_id == 3){
				this.serve_message()
			}
		},
		methods: {
			tapImage(img){
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: 1, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// //全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			async system_message() {
				this.loading = true
				let param = {
					page: this.page,
					pageSize: this.pageSize
				}
				let data = await system_message(param)
				this.loading = false
				data = data.data
				if (this.page == 1) {
					this.system_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.system_data = [...this.system_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			async serve_message() {
				this.loading = true
				let param = {
					page: this.page,
					pageSize: this.pageSize
				}
				let data = await serve_message(param)
				this.loading = false
				data = data.data
				if (this.page == 1) {
					this.serve_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.serve_data = [...this.serve_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			downCallback() {
				this.page = 1
				if (this.tab_id == 1) {
					this.system_message()
				}else if(this.tab_id == 3){
					this.serve_message()
				}
			},
			upCallback(page) {
				this.page += 1
				if (this.tab_id == 1) {
					this.system_message()
				}else if(this.tab_id == 3){
					this.serve_message()
				}
			},
			tap_tab(id){
				this.tab_id = id
				this.mescroll.triggerDownScroll()
			},
			tap_comment(id){
				this.comment_id = id
			}
		}
	}
</script>
 <style>
	 page {
	 	display: -webkit-box;
	 	width: 100%;
	 	height: 100%;
	 	background: #F7F8FA;
	 }
	  
 </style>
<style  lang="scss" scoped>

	.message {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.message_head {
		background: linear-gradient(207deg, #FFFABE 0%, rgba(255,252,207,0) 100%);
		.head_title {
			padding: 34rpx 44rpx 0;
			font-size: 48rpx;
			color: #22150B;
			font-weight: bold;
		}
		.head_tab {
			display: flex;
			padding: 18rpx 32rpx 58rpx;
			.tab_item {
				position: relative;
				width: 218rpx;
				height: 220rpx;
				margin-right: 16rpx;
				margin: 0 auto;
				&.current {
					.item_icon {
						width: 0px;
						height: 0px;
						border: 40rpx solid transparent;
						border-bottom-color: #F7F8FA;
						position: absolute;
						bottom: -56rpx;
						left: 50%;
						transform: translate(-50%, 0);
					}
				}
				image {
					width: 100%;
				}
				text {
					white-space: nowrap;
					position: absolute;
					bottom: 24rpx;
					left: 50%;
					transform: translate(-50%, 0);
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
 
	.message_content {
		height: 100%;
		flex: 1;
		overflow-y: scroll;
		padding-bottom: 166rpx;
		.content_serve {
			box-sizing: border-box;
			padding: 10rpx 32rpx;
			.serve_item {
				margin-top: 16rpx;
				background: #fff;
				height: 148rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0 24rpx;
				.item_img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 12rpx;
					border-radius: 20rpx;
					image {
						width: 100%;
					}
				}
				.item_box {
					.box_title {
						font-size: 28rpx;
						color: #22150B;
						font-weight: bold;

					}
					.box_tips {
						.tips_text {
							font-size: 24rpx;
							color: #22150B;
							margin-right: 8rpx;
						}
						.tips_icon {
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							background: #80E252;
							border-radius: 50%;
						}
						
					}
				}
				
				.item_btn {
					width: 160rpx;
					height: 60rpx;
					background: #FF9548;
					border-radius: 44rpx;
					margin-left: auto;
					.btn_box {
						margin-top: -6rpx;
						width: 160rpx;
						height: 60rpx;
						background: #FFE78F;
						border-radius: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #22150B;
					}
				}
			}
			
		}
		.content_comment {
			.comment_head {
				margin: 32rpx 60rpx 16rpx;
				height: 100rpx;
				background: #FFFABE;
				border-radius: 68rpx;
				display: flex;
				align-items: center;
				.head_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					text {
						font-size: 32rpx;
						color: #22150B;
						font-weight: bold;
						margin-right: 12rpx;
					}
					image {
						width: 48rpx;
					}
					&.current {
						background-color: #FCE668;
						border-radius: 68rpx;
					}
				} 
			}
			.comment_list {
				padding: 0 32rpx;
				box-sizing: border-box;
				.list_item1 {
					margin-top: 16rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					padding: 24rpx;
					.item1_head {
						display: flex;
						align-items: center;
						.head_img {
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 12rpx;
							image {
								width: 100%;
							}
						}
						.text_title {
							font-size: 28rpx;
							color: #22150B;
							font-weight: bold;
						}
						.text_time {
							font-size: 24rpx;
							color: #818181;
						}
					}
					.item1_icon {
						margin-top: 14rpx;
						display: inline-block;
						.icon_item {
							margin-top: 8rpx;
							margin-right: 8rpx;
							float: left;
							font-size: 20rpx;
							color: #C56A00;
							display: inline-block;
							padding: 6rpx 14rpx;
							background: linear-gradient( 90deg, #FEF68C 0%, rgba(255,253,228,0.47) 100%);
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}
					}
					.item1_tips {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #6C6C6C;
					}
					.item1_bottom {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.bottom_reply {
							font-size: 24rpx;
							color: #6C6C6C;
							.iconfont {
								font-size: 30rpx;
								margin-left: 4rpx;
							}
						}
						.bottom_leke {
							margin-left: 26rpx;
							font-size: 24rpx;
							color: #6C6C6C;
							.iconfont {
								font-size: 30rpx;
								margin-left: 4rpx;
								font-weight: bold;
							}
						}
					}
				}
				
				.list_item2 {
					margin-top: 16rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 24rpx;
					display: flex;
					align-items: center;
					.item2_left {
						width: 510rpx;
						.left_text {
							font-size: 24rpx;
							color: #6C6C6C;
						}
						.left_game {
							margin-top: 12rpx;
							display: flex;
							align-items: center;
							.game_image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50rpx 50rpx 50rpx 50rpx;
								border: 2rpx solid #FFAF75;
								box-sizing: border-box;
								overflow: hidden;
								image {
									width: 100%;
								}
							}
							.game_name {
								margin-left: 16rpx;
								font-size: 24rpx;
								font-weight: bold;
								color: #22150B;
							}
						}
					}
					.item2_right {
						margin-left: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.right_image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							border: 4rpx solid #FFAF75;
							overflow: hidden;
							image {
								width: 100%;
							}
						}
						.right_time {
							margin-top: 14rpx;
							font-size: 24rpx;
							color: #898989;
						}
					}
				}
			}
			
			
		}
		.content_system {
			padding: 0 32rpx;
			box-sizing: border-box;
			.system_item {
				margin-top: 16rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 24rpx;
				display: flex;
				.item_image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 100%;
					}
				}
				.item_content {
					margin-left: 26rpx;
					.content_title {
						font-size: 28rpx;
						color: #22150B;
						font-weight: bold;
					}
					.content_tips {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #9B9B9B;
					}
				}
				.item_time {
					font-size: 20rpx;
					color: #C8C8C8;
					margin-left: auto;
				}
			}
		}
	}
 
	
</style>